<template>
  <Page name="登录密码">
    <div class="edit-password">
      <section>
        <div>
            原密码
        </div>
        <div class="pwd-box">
            <input :type="oldType" v-model="oldPwd" placeholder="请输入旧密码">
            <i class="icon icon-eye" @click="showPwd('old')" v-if="!oldPwdShow"></i>
            <i class="icon icon-close-eye" @click="hidePwd('old')" v-if="oldPwdShow"></i>
            <img src="~/assets/img/ic_login_clear@2x.png" alt="" class="clear"
              v-if="oldPwd.length!=0"
              @click="oldPwd=''">
        </div>
      </section>
      <section>
        <div>
            新密码
        </div>
        <div class="pwd-box">
            <input :type="newType" v-model="newPwd" placeholder="6-30位含大小写字母数字组合">
            <i class="icon icon-eye" @click="showPwd('new')" v-if="!newPwdShow"></i>
            <i class="icon icon-close-eye" @click="hidePwd('new')" v-if="newPwdShow"></i>

            <img src="~/assets/img/ic_login_clear@2x.png" alt="" class="clear"
              v-if="newPwd.length!=0"
              @click="newPwd=''">
        </div>
      </section>

      <section>
        <div>
            确定密码
        </div>
        <div class="pwd-box">
            <input :type="reType" v-model="rePwd" placeholder="请再次输入新密码">
            <i class="icon icon-eye" @click="showPwd('re')" v-if="!rePwdShow"></i>
            <i class="icon icon-close-eye" @click="hidePwd('re')" v-if="rePwdShow"></i>
            <img src="~/assets/img/ic_login_clear@2x.png" alt="" class="clear"
              v-if="rePwd.length!=0"
              @click="rePwd=''">
        </div>
      </section>
      <div class="btn">
          <button class="btn btn-block btn-primary" @click="submit">
            完成
          </button>
        </div>
    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';

export default {
  components: {
    Page,
  },
  data() {
    return {
      oldType: "password",
      newType: "password",
      reType: "password",
      oldPwdShow: false,
      newPwdShow: false,
      rePwdShow: false,
      oldPwd: "",
      newPwd: "",
      rePwd: "",
      tips:["请输入原密码","请输入新密码","请确定密码","新密码不一致"]
    };
  },
  mounted(){

  },
  methods: {
    showPwd(type) {
      if (type === "new") {
          this.newType = "text";
          this.newPwdShow = true;
      }
      if (type === "old") {
          this.oldType = "text";
          this.oldPwdShow = true;
      }
      if (type === "re") {
          this.reType = "text";
          this.rePwdShow = true;
      }
    },
    async submit(){
      if(this.oldPwd==""){
        this.$toast(this.tips[0]);
        return false;
      }
      if(this.newPwd==""){
        this.$toast(this.tips[1]);
        return false;
      }
      if(this.rePwd==""){
        this.$toast(this.tips[2]);
        return false;
      }
      if(this.newPwd!=this.rePwd){
        this.$toast(this.tips[3]);
        return false;
      }

      let { data: rs } = await this.$axios.post('?ct=api&ac=change_pwd',{
        old_pwd:this.oldPwd,
        new_pwd:this.newPwd,
      });
      if(rs.code == 0){
        this.$toast("修改登录密码成功");
        this.$router.push({path:"/setting"});
      }else{
        this.$toast(rs.msg);
      }

    },
    hidePwd(type) {
      if (type === "new") {
          this.newType = "password";
          this.newPwdShow = false;
      }
      if (type === "old") {
          this.oldType = "password";
          this.oldPwdShow = false;
      }
      if (type === "re") {
          this.reType = "password";
          this.rePwdShow = false;
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .edit-password{
    display: flex;
    flex-direction: column;

    .header-middle {
        font-size: 36px;
        color: #333;
    }

    .complete-btn {
        font-size: 30px;
        color: #e64a19;
        line-height: 1.093333rem;
    }

    section {
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      padding: 40px 30px;
      width:100%;
      background-color: #fff;
      border-bottom:1px solid #ededed;
      &:first-child{
        margin-top:30px;
      }
      div:first-child {
          color: #000;
          font-size: 32px;
      }

      .pwd-box {
        position: relative;
        flex: 1;
          input {
              font-size: 32px;
              text-align: left;
              padding-left:80px;
              color: #666;
              border:none;
              width:86%;
          }
          .icon {
              display: inline-block;
              margin-left: 30px;
              background-size: 100% 100%;
          }
          .icon-close-eye {
              width: 30px;
              height: 30px;
              background-image: url("~assets/img/ic_password_visible.png");
          }
          .icon-eye {
              width: 30px;
              height: 30px;
              background-image: url("~assets/img/ic_password_hide.png");
          }
          .clear{
            width:30px;
            height:30px;
            position: absolute;
            right:70px;
            top:1px;
          }
      }
    }
    div.btn{
      width:688px;
      margin:40px auto;
      display: block;
      .btn{
        border-radius: 8px;
        border:0;
      }
    }
  }
</style>
